<template>
    <div class="all">
        <div class="container">
            <div class="left">
                <div class="title">个人信息</div>
                <img :src="src">
                <div class="personInfo">
                    <p><b>身份证号：</b>{{card}}</p>
                    <p><b>性别：</b>{{$store.state.patientSex}}</p>
                    <p><b>姓名：</b>{{$store.state.patientName}}</p>
                    <p><b>密码：</b><input v-model="pwd" type="password" disabled="disabled" style= "background-color:transparent;border:0;"> </p>
                    <p><b>余额：</b>{{$store.state.patientMoney}}￥</p>
                </div>
            </div>  
            <div class="right">
                <div class="title">相关操作</div>
                <p><b>所绑定号码：</b>{{ phone }}</p>
                <el-button class="btn" type="info" plain @click="alterPwd">修改密码</el-button>
                <el-button class="btn" type="info" plain @click="open">余额充值</el-button>
                <el-button class="btn" type="info" plain @click="lookOrder">查看订单</el-button>
                <el-button class="btn" type="info" plain @click="lookSpend">查看近期消费统计</el-button>
            </div>  
        </div>
        <el-dialog
            title="修改密码"
            :visible.sync="alterVisible" 
            width="30%">
                <el-form 
                    :model="ruleForm" status-icon 
                    :rules="rules" 
                    ref="ruleForm" 
                    label-width="100px" 
                    class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input type="password" v-model="ruleForm.oldPwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validateOldpwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'));
            } else if (value !== this.pwd) {
                callback(new Error('旧密码输入有误!'));
            } else {
                callback();
            }
        }
        return{
            src:"",
            pwd:"",
            card:"",
            phone:"",
            ruleForm: {
                pass: '',
                checkPass: '',
                oldPwd:''
            },
            alterVisible:false,
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                oldPwd:[
                    { validator: validateOldpwd, trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        // 组件挂载完成后从localStorage获取图片路径 
        this.src = localStorage.getItem('patientFace');
        this.pwd = this.$store.state.patientPwd;
        
        // card.slice()
        this.card = this.$store.state.patientIdCard.slice(0, 5) +"**********"+ this.$store.state.patientIdCard.slice(16);
        this.phone = this.$store.state.patientPhone.slice(0, 3) +"******"+this.$store.state.patientPhone.slice(8)
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$axios.get(
                    '/admin/alterPwd',{
                        params:{
                            id:this.$store.state.adminId,
                            newPwd:this.ruleForm.pass
                        }
                    }
                ).then(res=>{
                    console.log("修改密码",res)
                    if(res != undefined){
                        if(res.code == 1){
                            this.alterVisible = false
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                showClose: true,
                                message: '修改失败',
                                type: 'error'
                            });
                        }                        
                    }

                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        alterPwd(){
            this.alterVisible = true
            
        },
        lookOrder(){
            this.$router.push("/menu/person/order")
        },
        lookSpend(){
            this.$router.push("/echart")
        },
        open() {
            this.$prompt('请输入要充值的余额', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern:/^[0-9]*$/,
                inputErrorMessage: '填入不正确'
            }).then(({ value }) => {
                var totalMoney = Number(this.$store.state.patientMoney) + Number(value)
                this.$axios.get(
                    "/patient/recharge",{
                        params:{
                            id:this.$store.state.patientId,
                            value:totalMoney
                        }
                    }
                ).then(res=>{
                    if(res != undefined){
                        this.$message({
                            type: 'success',
                            message: '充值成功！！！'
                        });
                        this.$store.state.patientMoney = totalMoney
                    }
                })
                
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消输入'
                });       
            });
        }
    }

}
</script>
<style scoped>
body{
}
.all{
    
    height:87vh;
    background-image: url("../../../static/img/welCome.png");
    background-size: 100% 120%;
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */ 
}

.container {  
    border-radius: 15px;
    width: 800px;
    height: 400px;
    background-color: white;
    display: grid;  
    grid-template-columns: 1fr 1fr; /* 创建两列，每列占据等宽空间 */  
}
.left{
    background-color: rgb(240, 237, 237);

}
.title{
    margin-top: 10px;
    font-family: 'STXingkai', Courier, monospace;
    font-size: 28px;
}
.left img{
    margin-top: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
.personInfo{
    margin-left: 60px;
    text-align: left;
}

.btn{
    width: 200px;
    margin:10px
}
</style>
